<template>
  <div v-loading="loading">
    <!--    头部部分-->
    <div style="padding-bottom: 10px">
      <span style="margin-right: 20%;font-weight: bold;font-size: larger;" v-html="paper.paperName"></span>
      <!--倒计时-->
      <div style="margin-right: 20%;margin-top: 10px">
        倒计时:
        <el-tag
            size="medium"
            type="danger"
            effect="dark">
          {{ hour }}:{{ minute }}:{{ second }}
        </el-tag>
      </div>
      <el-divider></el-divider>
      <div style="padding-right: 73%;font-size: small">
        题量:{{ paper.radioNum + paper.multiNum + paper.judgeNum + paper.shortAnswerNum }}
        <span style="margin-left: 20px">考试时长:{{ paper.checkTime }}(分钟)</span>
      </div>
    </div>
    <div class="questionDiv" v-for="(q,index) in questionList" :key="q.id">
      <div>
        (<span style="font-weight: bold">
            {{ q.questionType == 1 ? '单选题' : q.questionType == 2 ? '多选题' : q.questionType == 3 ? '判断题' : '简答题' }}
           </span>){{ index + 1 }}、 <span v-html="q.questionContent"></span>
      </div>
      <!--单选题和多选题选项-->
      <div v-if="q.questionType==1||q.questionType==2" style="padding-top: 15px">
        <div><span style="font-weight: bold;">A、</span>
          {{ q.optionA }}
        </div>
        <div style="margin-top: 10px"><span style="font-weight: bold;">B、</span>
          {{ q.optionB }}
        </div>
        <div style="margin-top: 10px"><span style="font-weight: bold;">C、</span>
          {{ q.optionC }}
        </div>
        <div style="margin-top: 10px"><span style="font-weight: bold;">D、</span>
          {{ q.optionD }}
        </div>
      </div>
      <el-divider></el-divider>
      <!--单选题答案-->
      <div v-if="q.questionType==1">
        <el-radio-group v-model="form.radioArray[index]">
          <el-radio v-for="(item,index) in list" :key="item.id" :label="item.id"
                    @change="changeAnswer(q.id,item.id)">
            <span style="font-weight: bold;font-size: larger" v-html="item.anames"></span>
          </el-radio>
        </el-radio-group>
      </div>
      <!--多选题答案-->
      <div v-if="q.questionType==2">
        <el-checkbox-group v-model="form.multiArray[index]">
          <el-checkbox v-for="(item,index2) in list" :key="item.id" :label="item.id"
                       @change="multiChange(q.id,index,form.multiArray)">
            <span style="font-weight: bold;font-size: larger" v-html="item.anames"></span>
          </el-checkbox>
        </el-checkbox-group>
      </div>
      <!--判断题答案-->
      <div v-if="q.questionType==3">
        <el-radio-group v-model="form.judgeArray[index]">
          <el-radio v-for="(j,index) in judge" :key="j.id" :label="j.id" @change="selectChange(q.id,j.id)">
            <span style="font-weight: bold;font-size: larger" v-html="j.anames"></span>
          </el-radio>
          <!--        <el-radio v-model="form.judgeArray[index]" label="2">错误</el-radio>-->
        </el-radio-group>
      </div>
      <!--简答题答案-->
      <div v-if="q.questionType==4">
        <el-input style="width: 98%"
                  type="textarea"
                  :rows="3"
                  @change="shortChange(q.id,form.shortAnswerArray[index])"
                  placeholder="请在此处输入简答题答案"
                  v-model="form.shortAnswerArray[index]">
        </el-input>
      </div>
      <el-divider><i class="el-icon-edit"></i></el-divider>
    </div>
    <div style="padding-top: 30px;margin-right: 20%">
      <el-button type="primary" @click="submitAnswer">交卷</el-button>
    </div>
  </div>
</template>

<script>
export default {
  name: "TestPaper",
  data() {
    return {
      hour: 0,
      minute: 0,
      second: 0,
      //remainTime:'5',
      paperId: null,
      paper: {},
      form: {
        radioArray: [],
        multiArray: [],
        judgeArray: [],
        shortAnswerArray: []
      },
      list: [
        {id: 'A', anames: 'A'},
        {id: 'B', anames: 'B'},
        {id: 'C', anames: 'C'},
        {id: 'D', anames: 'D'},
      ],
      judge: [
        {id: 1, anames: '正确'},
        {id: 0, anames: '错误'}
      ],
      questionList: [],
      loading: false,
      answerList: {
        paperId: null,
        username: null,
        radioList: [],//单选题答案 {questionId:1,answer:A}
        judgeList: [],  //判断题答案
        shortAnswerList: [],  //简答题答案
        multiList: []  //多选题答案
      },
    }
  },
  props: {
    remainTime: {    // 倒计时间总秒数
      default: '10'
    }
  },
  mounted() {
    //window.location.reload();
    //this.countDowm();
    let id = this.$route.query.id;
    let startCheck = this.$route.query.startCheck;
    let checkTime = this.$route.query.checkTime;
    this.answerList.paperId = id;
    this.answerList.username = sessionStorage.getItem("username");
    this.findPaperById(id);
    let date = new Date();
    //结束时间秒
    let endDate = new Date(startCheck);
    let secondsEnd = endDate.getSeconds() + (endDate.getMinutes()) * 60 + (endDate.getHours()) * 60 * 60 + checkTime * 60;
    let secondsStart = (date.getHours()) * 60 * 60 + (date.getMinutes()) * 60 + date.getSeconds();
    this.remainTime = secondsEnd - secondsStart;
    //console.log("时间"+item)

    setTimeout(() => {
      for (let i = 0; i < this.questionList.length; i++) {
        if (this.questionList[i].questionType == 2) {
          this.$set(this.form.multiArray, i, []);
        }
      }
    }, 1000);
    if (this.remainTime > 0) {
      this.hour = Math.floor((this.remainTime / 3600) % 24)
      this.minute = Math.floor((this.remainTime / 60) % 60)
      this.second = Math.floor(this.remainTime % 60)
      this.countDowm()
    }
  },
  methods: {
    countDowm() {
      let self = this;
      clearInterval(this.promiseTimer)
      this.promiseTimer = setInterval(function () {
        if (self.hour == 0 && self.minute == 0 && self.second == 0) {
          //alert('到时间自动提交')
          self.submit();
        }
        if (self.hour === 0) {
          if (self.minute !== 0 && self.second === 0) {
            self.second = 59
            self.minute -= 1
          } else if (self.minute === 0 && self.second === 0) {
            self.second = 0
            self.$emit('countDowmEnd', true)
            clearInterval(self.promiseTimer);
          } else {
            self.second -= 1
          }
        } else {
          if (self.minute !== 0 && self.second === 0) {
            self.second = 59
            self.minute -= 1
          } else if (self.minute === 0 && self.second === 0) {
            self.hour -= 1
            self.minute = 59
            self.second = 59
          } else {
            self.second -= 1
          }
        }
      }, 1000);

    },
    formatNum(num) {
      return num < 10 ? '0' + num : '' + num
    },
    //多选题答案
    multiChange(questionId, index, answer) {
      let parm = {questionId: null, andAnswerList: []};
      parm.questionId = questionId;
      parm.andAnswerList = answer[index];
      let flag = true;
      for (let i = 0; i < this.answerList.multiList.length; i++) {
        if ((this.answerList.multiList)[i].questionId == questionId) {
          if (answer[index].length == 0) {
            //如果为空，就去掉
            flag = false;
            (this.answerList.multiList).splice(i, 1);
          } else {
            flag = false;
            (this.answerList.multiList)[i].andAnswerList = answer[index];
          }
        }
      }
      if (flag) {
        this.answerList.multiList.push(parm);
      }

    },
    submitAnswer() {
      if (this.questionList.length > this.answerList.radioList.length + this.answerList.judgeList.length + this.answerList.shortAnswerList.length + this.answerList.multiList.length) {
        this.$confirm('题目没有答完, 是否继续提交?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.submit();
        })
      } else {
        this.$confirm('确定交卷吗?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.submit();
        })
      }
    },

    //提交题目方法
    submit() {
      this.axios.post("/answer/save", this.answerList).then(resp => {
        if (resp.data.statusCode == 200) {
          clearInterval(this.promiseTimer);
          this.$message({
            message: resp.data.message,
            type: 'success'
          });
          let that = this;
          setTimeout(function () {
            that.$router.replace('/question/paperList');
          }, 1000);
        }
      })
    },
    //单选题答案
    changeAnswer(questionId, answer) {
      let parm = {questionId: null, answer: ''};
      let flag = true;
      for (let i = 0; i < this.answerList.radioList.length; i++) {
        if (this.answerList.radioList[i].questionId == questionId) {
          this.answerList.radioList[i].answer = answer;
          flag = false;
        }
      }
      if (flag) {
        parm.questionId = questionId;
        parm.answer = answer;
        this.answerList.radioList.push(parm);
      }

    },
    //判断题答案
    selectChange(questionId, answer) {
      let parm = {questionId: null, answer: ''};
      let flag = true;
      for (let i = 0; i < this.answerList.judgeList.length; i++) {
        if (this.answerList.judgeList[i].questionId == questionId) {
          this.answerList.judgeList[i].answer = answer;
          flag = false;
        }
      }

      if (flag) {
        parm.questionId = questionId;
        parm.answer = answer;
        this.answerList.judgeList.push(parm);
      }
    },

    //简答题答案
    shortChange(questionId, answer) {
      let parm = {questionId: null, answer: ''};
      let flag = true;
      for (let i = 0; i < this.answerList.shortAnswerList.length; i++) {
        if (this.answerList.shortAnswerList[i].questionId == questionId) {
          if (answer.replace(/(^\s*)|(\s*$)/g, "") == '') {
            (this.answerList.shortAnswerList).splice(i, 1);
            flag = false;
          } else {
            this.answerList.shortAnswerList[i].answer = answer;
            flag = false;
          }
        }
      }
      if (flag) {
        if (answer.replace(/(^\s*)|(\s*$)/g, "") == '') {
          return;
        }
        parm.questionId = questionId;
        parm.answer = answer;
        this.answerList.shortAnswerList.push(parm);
      }

    },

    //查询试卷试题
    findPaperById(id) {
      this.loading = true;
      this.axios.get("/paper/random/findPaperById/" + id).then(resp => {
        if (resp.data.statusCode == 200) {
          this.paper = resp.data.data;
          this.questionList = resp.data.data.questions;
          this.loading = false;
        }
      })
    }
  }
}
</script>

<style scoped>
.questionDiv {
  width: 80%;
  text-align: left;
  padding-left: 30px;
  border: 1px solid #ffffff;
  border-radius: 30px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  margin-top: 20px;
  padding-top: 10px;
}
</style>
